<template>
  <div class="DeskTop">
  <transition name="plus-icon1">
  <div class="taskbarInBottom" v-if="isOpen">
    <!-- 桌面 -->
    <div class="desktop" @click="handleClose">
      <Icon :list='labelList'/>
    </div>
    <!-- 开始菜单 -->
    <transition name="start">
    <div class="start" v-if="display">
      <div class="left">
        <div class="icon">
          <img src="../../static/image/Shut_down.svg" title="关机" alt="关机" @click="closeDesktop"/>
        </div>
        <div class="icon">
          <img src="../../static/image/setup.svg" title="设置" alt="设置" />
        </div>
      </div>
      <div class="right">
        <StartTab :list = 'labelList'/>
      </div>
    </div>
  </transition>
    <!-- 任务栏 -->
    <div class="taskbar">
      <!-- 开始按钮 -->
      <div class="taskbar-start" @click="handleClick">
        <div class="svg"></div>
      </div>
      <!-- 任务栏 -->
      <Taskbar />
      <!-- 任务栏时间 -->
      <div class="taskbar-time">
        <!-- <p>{{times}}</p> -->
        <p>{{ time }}</p>
        <p>{{ date }}</p>
      </div>
      <!-- 控制中心 -->
      <div class="taskbar-console"></div>
      <!-- 显示桌面 -->
      <div class="taskbar-desktop"></div>
    </div>
    <Windows title="个人简历" >
      <myResume/>
    </Windows>
    <Windows title="项目经历" >
      <myProject/>
    </Windows>
  </div>
  </transition>
  <transition name="h1">
    <div class="closeDestop" v-if="!isOpen">
      <div id="px-render"></div>
      <FlipClock class="CloseClick"></FlipClock>
      <div class="closeIcon" @mouseenter="navBtnEnter" @mouseleave="navBtnLeave" @click="navBtnClick">
        <svg class="main-logo" viewBox="0 0 1024 1024">
          <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="1" class="lines">
            <path
              d="M512 577.6c12.2 0 22.3-10 22.3-22.3v-533C534.3 10 524.2 0 512 0s-22.3 10-22.3 22.3v533.1c0 12.2 10.1 22.2 22.3 22.2z"
              stroke-width="10" stroke="#fff" p-id="3499"></path>
            <path
              d="M671 206.8c-11.4-4.6-24.4 0.9-29 12.3-4.6 11.4 0.9 24.4 12.3 29C798.4 306.5 891.5 444.6 891.5 600c0 209.3-170.3 379.6-379.6 379.6S132.4 809.2 132.4 599.9c0-155.4 93.1-293.5 237.2-351.9 11.4-4.6 16.9-17.6 12.3-29-4.6-11.4-17.6-16.9-29-12.3-161 65.3-265 219.6-265 393.2C87.9 833.8 278.2 1024 512 1024s424.1-190.2 424.1-424.1c0-173.6-104-327.9-265.1-393.1z"
              stroke-width="10" stroke="#fff" p-id="3500"></path>
          </g>
        </svg>
      </div>
    </div>
    </transition>
  </div>
</template>

<script>
import Windows from "../components/windows";
import Icon from "../components/icon";
import Taskbar from "../components/taskbar";
import StartTab from "../components/startTab";
import FlipClock from '../components/FlipClock.vue'
import myResume from './myResume/index.vue'
import myProject from './myProject/index.vue'
import * as PIXI from 'pixi.js'
import gsap from 'gsap'
import anime from 'animejs/lib/anime.js'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Windows, Icon, Taskbar, StartTab, FlipClock,myResume,myProject },
  data() {
    //这里存放数据
    return {
      option : {
            width: 1500,
            height: 1000,
            transparent: true,
        },
      isOpen:false,
      style: {
        width: "",
        height: "",
      },
      date: "",
      time: "",
      display: false,
      todos: [],
      isselect: false,
      labelList: [
        {
          title: "个人简历",
          imgPath: require("../../static/image/个人简历.svg"),
          firstSecond:'G'
        },
        {
          title: "项目经历",
          imgPath: require("../../static/image/xmgl.svg"),
          firstSecond:'X'
        }
      ],
      flip:null,
      backNode:null,
      frontNode:null,
      count:0,
      isFlipping:false
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    closeDesktop(){
      this.isOpen = false
      this.$nextTick(()=>{
        this.display = false
        this.init()
      })
    },
    navBtnLeave(){
      const myAnimation = anime({
        targets: '.closeIcon .lines path',
        strokeDashoffset: [0, anime.setDashoffset],
        easing: 'easeInOutSine',
        duration: 1500,
        delay: function (el, i) { return i * 250 },
        direction: 'reverse'
      })
      gsap.to('.closeIcon .lines path', 0.4 ,{stroke: '#fff'})
      gsap.to('.closeIcon .lines path', 0.4 ,{fill: ''})
    
    },
    navBtnEnter(){
      gsap.to('.closeIcon .lines path', 0.4 ,{stroke: '#ff0000'})
      const myAnimation = anime({
        targets: '.closeIcon .lines path',
        strokeDashoffset: [anime.setDashoffset,0],
        easing: 'easeInOutSine',
        duration: 500,
        delay: function (el, i) { return i * 250 },
        direction: 'normal'
      })
      gsap.to('.closeIcon .lines path', 0.4 ,{fill: '#ff0000'})

    },
    navBtnClick(){
      this.isOpen = true
      var dom = document.getElementsByTagName('canvas')
            if (dom) {
              for (let i = 0; i < dom.length; i++) {
                dom[i].remove()
              }
            }
    },
    init() {
      this.option.width = window.innerWidth
      this.option.height = window.innerHeight
      var app = new PIXI.Application(this.option);
      var renderer = app.renderer;
      var preview;
      var displacementSprite;
      var displacementFilter;
      var stage;
      var playground = document.getElementById('px-render');
      function setScene(url) {

        playground.appendChild(renderer.view);

        stage = new PIXI.Container();
        preview = PIXI.Sprite.fromImage(url);
        displacementSprite = PIXI.Sprite.fromImage('/sprite.png');

        displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;

        displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
        preview.width= 1960
        preview.height= 1000
        displacementSprite.width= 1960
        displacementSprite.height= 1000
        stage.addChild(preview);

        stage.addChild(displacementSprite);
   
        app.stage.addChild(stage);
      }


      var cmWidth = document.body.clientWidth / 2
      var cmHeight = document.body.clientHeight / 2

      var velocity = -0.03;
      var move = {
        x: 0,
        y: 0
      };

      document.onmousemove = function (e) {
        anime({
          targets: move,
          x: e.clientX,
          y: e.clientY,
          duration: 1000,
          easing: 'easeOutSine',
          update: function () {
            stage.filters = [displacementFilter];
            displacementFilter.scale.set((move.x - cmWidth) * velocity, (move.y - cmHeight) * velocity * 2);
          }
        });
}

setScene("/photo.png");
    },
    handleClose() {
      this.display = false;
    },
    handleClick() {
      this.display = !this.display;
    },
    currentTime() {
      setInterval(this.getYear, 1000);
    },
    handleDispaly(tabName) {
      this.display = false;
      this.isselect = true;
      if (this.todos.indexOf(tabName) === -1) {
        this.todos.push(tabName);
      } else {
        return true;
      }
    },
    handleMiniBox() {
      this.display_box = false;
      this.isselect = false;
    },
    handleCloseBox(tabName) {
      this.display_box = false;
      this.todos.splice(this.todos.indexOf(tabName));
    },
    handleOpenBox(index) {
      console.log(index);
      this.display_box = !this.display_box;
      this.isselect = !this.isselect;
    },
    getYear() {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      this.date = year + "-" + month + "-" + day;
      let h = date.getHours();
      let m = date.getMinutes() >= 10 ? date.getMinutes() : "0" + date.getMinutes();
      this.time = h + ":" + m;
    },
    // 禁止鼠标右键
    prohibit() {
      document.oncontextmenu = function() {
        event.returnValue = false;
        return;
      };
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getYear();
    this.currentTime();
    this.prohibit();
    // this.style.width = document.body.clientWidth
    // this.style.height = document.body.clientHeight
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$nextTick(() => {
      this.flip = document.getElementById('flip')
    this.backNode = document.querySelector('.back')
    this.frontNode = document.querySelector('.front')
    });
    this.init()

  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {
    if (this.getYear) {
      clearInterval(this.getYear); // 在Vue实例销毁前，清除时间定时器
    }
  }, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
#px-render {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
#px-render canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1.05);
}
.taskbarInBottom {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: url('../../static/image/20201004111303703.png') no-repeat;
  background-size: 100% 100%;
}
.CloseClick{
  position: absolute;
    top: 10px;
    left: 26%;
    caret-color: transparent;
}
.closeDestop{
	margin: 0;
	height: 100%;
	background:#000;
}
.DeskTop{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.desktop {
  width: 100%;
    height: calc(100% - 5% - 20px);
    margin-top: 20px;
    display: flex;
  }

.taskbar {
  width: 100%;
  height: 5%;
  background-color: rgb(185, 216, 232);
  position: relative;
  z-index: 4000;
}

.taskbar-start {
  width: 50px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.taskbar-start .svg {
  width: 21px;
  height: 21px;
  background: url("../../static/image/windows.svg") no-repeat center;
  background-size: 21px 21px;
}

.taskbar-start img {
  width: 21px;
  height: 21px;
}

.taskbar-start:hover {
  background-color: #e3ebef;
}

.taskbar-start:hover .svg {
  background: url("../../static/image/windows (1).svg") no-repeat center;
  background-size: 21px 21px;
}

.taskbar-desktop {
  height: 100%;
  width: 4px;
  border-left: 1px solid #a7b0b7;
  position: absolute;
  top: 0;
  right: 0;
}

.taskbar-desktop:hover {
  background-color: #e3ebef;
}

.taskbar-console {
  height: 100%;
  width: 40px;
  background: url("../../static/image/news.svg") no-repeat center;
  background-size: 21px 21px;
  position: absolute;
  top: 0;
  right: 15px;
}

.taskbar-console:hover {
  background-color: #e3ebef;
}

.taskbar-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 75px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 55px;
}

.taskbar-time:hover {
  background-color: #e3ebef;
}

.taskbar-time p {
  font-size: 12px;
  color: #111;
  user-select: none;
}

.start {
  width: 300px;
  height: 500px;
  background-color: rgba(185, 216, 232,.9);
  position: absolute;
  bottom: 5%;
  display: flex;
  overflow: hidden;
  user-select: none;
  z-index: 4000;
}
.start-enter-active {
  animation: myfirst 1s;
  animation-timing-function:'linear'
}
/* 结束 */
.start-leave-active {
  animation: myfirst 1s reverse;
  animation-timing-function:'linear'

}
@keyframes myfirst {
  from {
    height: 0;
  }
  to {
    height: 500px;
  }
}

.start .left {
  width: 50px;
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
}

.start .left .icon {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.start .left .icon:hover {
  background-color: #e3ebef;
}

.start .left .icon img {
  width: 25px;
  margin: 0 auto;
}

.start .right {
  width: 250px;
  height: 100%;
  /* background-color: tomato; */
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.closeIcon{
  position: absolute;
    right: 60px;
    bottom: 45px;
    width: 100px;
    height: 100px;
    cursor: pointer;
}
/* .plus-icon-enter-active {
    transition: translateY(100%) 1.5s;
}
.plus-icon-enter {
   transform: translateY(100%);
} */

/* .plus-icon-leave-active {
    transition: opacity 1.5s;
}
.plus-icon-leave-to {
    opacity: 0;
} */
/* 1.过渡动画 */
@keyframes axisX {
  from {
    transform: translateY(-100%);
    
  }
  to {
    transform: translateY(0px);
  }
}

.h1-enter-active {
  animation: axisX 1s;
  animation-timing-function:'linear'
}
/* 结束 */
.h1-leave-active {
  animation: axisX 1s ;
  animation-timing-function:'linear'

}
</style>
